<template>
  <ul class="category-menu">
    <li
      v-for="(item, index) in menu"
      :key="index"
      class="menu-item"
      :class="{'active': current === index}"
      @click="clickMenu(item, index)"
    >
      <span class="icon"></span>
      <span class="name">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryMenu',
  props: ['menu', 'current'],
  methods: {
    clickMenu(item, index) {
      if (this.current === index) {
        return
      }
      this.$emit('clickMenu', { item, index })
    }
  }
}
</script>

<style scoped lang="stylus">
.category-menu
  .menu-item
    height 25px
    line-height 25px
    padding 12.5px 0
    display flex
    &.active
      background white
      color $main_color
      .icon
        background $main_color
      .name
        font-weight 700
    .icon
      width 10px
      border-radius 10px
      margin-left -5px
      background $background_color
    .name
      flex 1
      overflow hidden
</style>
